<template>
  <el-select
    v-model="indata"
    filterable
    remote
    clearable
    ref="select"
    :placeholder="placeholder"
    :remote-show-suffix="true"
    :remote-method="select"
    :loading="loading"
    @click="handleClick"
    @clear="handleClear"
  >
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.label"
      :value="item.value"
      @click="handleOptionClick(item)"
    >
      {{ item.selectLabel }}
    </el-option>
  </el-select>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  props: {
    modelData: {
      type: String,
      default: "",
    },
    placeholder: {
      type: String,
      default: "",
    },
    urlType: {
      type: String,
      default: "",
    },
    urlQueryData: {
      type: String,
      default: "",
    },
    key: {
      type: String,
      default: "",
    },
    option: {
      type: Array,
      default: () => [],
    },
  },
  emits: ["update:modelData", "getOption"],
  computed: {
    indata: {
      get() {
        return this.modelData;
      },
      set(value) {
        this.$emit("update:modelData", value);
      },
    },
  },
  data() {
    return {
      options: this.option,
      loading: false,
      ALLURL: {
        //字典API
        dict: "/api/dictDetail/query",
        //人员API（用户接口）
        man: "/api/user/query",
        //海运航线
        tradelane: "/api/base/shipline/query",
        //币种
        currency: "/api/base/currency/query",
      },
      inlabel: "",
    };
  },
  methods: {
    handleClick() {
      this.select(this.inlabel);
    },
    handleClear() {
      this.inlabel = "";
    },
    select(queryName) {
      if (!this.ALLURL[this.urlType]) {
        throw new Error("urlType不存在");
      }
      this.loading = true;
      this.$http
        .get(this.ALLURL[this.urlType], this.getQueryData(queryName))
        .then((res) => {
          if (this.urlType == "dict") {
            this.options = res.content.map((item) => {
              return {
                id: item.id,
                value: item.id,
                label: item.label,
                selectLabel: item.label,
              };
            });
          } else if (this.urlType == "man") {
            this.options = res.content.map((item) => {
              return {
                id: item.id,
                value: item.id,
                label: item.nickName,
                selectLabel: item.nickName,
              };
            });
          } else if (this.urlType == "tradelane") {
            this.options = res.content.map((item) => {
              return {
                id: item.id,
                value: item.id,
                label: item.shiplineName,
                selectLabel: item.shiplineName,
              };
            });
          } else if (this.urlType == "currency") {
            this.options = res.content.map((item) => {
              return {
                id: item.id,
                value: `${item.currencyCode}|${item.currencyName}`,
                label: `${item.currencyCode}|${item.currencyName}`,
                selectLabel: `${item.currencyCode}|${item.currencyName}`,
                name: item.currencyName,
                code: item.currencyCode,
              };
            });
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getQueryData(queryName) {
      if (this.urlType == "dict") {
        if (!this.urlQueryData) {
          throw new Error("dict必须需要urlQueryData");
        } else {
          return {
            PageIndex: 1,
            PageSize: 50,
            DictName: this.urlQueryData,
            Label: queryName,
          };
        }
      } else if (this.urlType == "man") {
        return {
          PageIndex: 1,
          PageSize: 50,
          KeyWords: queryName,
        };
      } else if (this.urlType == "tradelane") {
        return {
          PageIndex: 1,
          PageSize: 50,
          KeyWords: queryName,
        };
      } else if (this.urlType == "currency") {
        return {
          PageIndex: 1,
          PageSize: 50,
          KeyWords: queryName,
        };
      }
    },
    /**
     * 返回选择的option
     * @param {object} data - 选择的option
     */
    handleOptionClick(data) {
      this.inlabel = data.label;
      this.$emit("getOption", data);
    },
    focus() {
      this.$refs.select.focus();
    },
  },
  watch: {
    option(newVal) {
      this.options = newVal;
      if (newVal.length != 0) {
        this.inlabel = newVal.find((t) => {
          return t.value == this.indata;
        }).label;
      }
    },
  },
  mounted() {
    this.select(this.inlabel);
  },
});
</script>

<style lang="scss" scoped></style>
